<template>
  <div class="app-container">

    <el-row :gutter="24">
      <el-col :span="24" style="margin-bottom: 20px">
        <!-- 警告信息 -->
        <el-alert
          title="点击`开始考试`后将自动进入考试，请诚信考试！"
          type="error"
          style="margin-bottom: 10px"
        />

        <!-- 考试基本信息展示 -->
        <el-card class="pre-exam">
          <div><strong>考试名称：</strong>{{ exam_info.name }}</div>
          <div><strong>考试时长：</strong>{{ exam_info.lastTime }}分钟</div>
          <div><strong>是否摄像头监考：</strong>{{ exam_info.isFaceCheck?'是':'否'}}</div>
          <div><strong>是否可以提前交卷：</strong>{{ exam_info.isAdvance?'是':'否' }}</div>
          <div><strong>是否支持复制粘贴：</strong>{{ exam_info.isCopyPaste?'是':'否' }}</div>
          <div><strong>考试描述：</strong>{{ exam_info.remark }}</div>
        </el-card>
      </el-col>

      <!-- 按钮 -->
      <el-col :span="24">
        <el-button :loading="loading" type="primary" icon="el-icon-caret-right" @click="handleCreate">
          开始考试
        </el-button>
        <el-button @click="handleBack">
          返回
        </el-button>
      </el-col>

    </el-row>

    <el-dialog
      title="人脸验证"
      :visible.sync="dialogVisible"
      style="width:100%">
      <div>
        <!-- 警告信息 -->
        <el-alert
          title="该考试需要人脸验证通过后才能考试，请耐心等候该窗口自动关闭"
          type="error"
          style="margin-bottom: 10px"
        />
        <faceShot :src="'user'" @refreshImgData="faceIsOk"></faceShot> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {checkPhotoNormal } from "@/api/user";
import faceShot from './faceShot'
export default {
  name:'preExam',
  components:{
    faceShot,
  },
  data() {
    return {
      // 本次考试的属性信息
      exam_info:{},
      // 爱的魔力转圈圈
      fullscreenLoading: false,
      // 弹窗
      dialogVisible:true,
      // 人脸通过参数
      faceCanEnterExamFlag: false,
    }
  },
  mounted() {
    this.exam_info = JSON.parse(this.$route.query.exam_info);
  },
  methods: {
    // 人脸验证
    async faceIsOk(image){
      let result = await checkPhotoNormal(image, { emulateJSON: true });
      if (result.code == 20000) {
        alert("认证成功");
        this.dialogVisible = false;
        this.faceCanEnterExamFlag = true;
      }
      else{
        alert("识别错误！请重新检测或更新人脸信息");
      }
    },
    // 返回考试列表界面
    handleBack(){
      this.$router.push({ name: 'Coming_exam' });
    },
    // 在这里判断能否进入考试的各种条件
    studentCanEnter(){
      // 如果不要人脸，那没那么多事了
      if(!this.exam_info.isFaceCheck){
        return true;
      }else{
        //看有没有人脸验证过了
        return this.faceCanEnterExamFlag;
      }
    },
    // 进入考试界面
    handleCreate(){
      // 多一个人脸判断
      var flag = this.studentCanEnter();
      if(flag){
        const that = this;
        // 因为要全屏考试，所以需要先用遮罩把网页菜单栏之类的全部挡掉，再跳转
        const loading = this.$loading({
          lock: true,
          text: '正在努力加载试卷中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          that.$router.replace({ 
            name: 'StartExam',
            query:{
              exam_info:JSON.stringify(this.exam_info)
            },
          })
        }, 2000);
      }else{
        // 警告
        this.$message({
          type: 'warning',
          message: '你的人脸未通过验证，请重新开始'
        });
        // 帮助学生把窗口打开
        this.dialogVisible = true;
      }
    },
  },
}
</script>

<style scoped>

  .pre-exam div {

    line-height: 42px;
    color: #555555;
  }

</style>